<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业</title>
		<style>
			div#one{
				width: 900px;
				height: 200px;
				border: 1px solid gainsboro;
			}
			div#two{
				width: 700px;
				margin-top: 40px;
				margin-left: 100px;
				margin-right: 100px;
				border: 1px solid gainsboro;
			}
			div#three{
			position:relative;
			top: 3px;
			left: 0px;
			width:40px;
			height:40px;
			bo rder:1px solid gainsboro;
			margin-top:20px;
			text-align:center;
			line-height:40px;
			}
			div#four{
				position: relative;
				top: -59px;
				left:49px;
				width:40px;
				height:40px;
				border-radius:5px;
				border:1px solid gainsboro;
				margin-top:20px;
				text-align:center;
				line-height:40px;
				color:blue;
			}
			div#five{
				position:relative;
				top:-121px;
				left: 99px;
				width:40px;
			    height:40px;
			    border-radius:5px;
			    border:1px solid gainsboro;
			    margin-top:20px;
			    text-align:center;
			    line-height:40px;
			    color:blue;
				}
				div#six{
				position:relative;
				top:-183px;left:150px;
				width:40px;
				height:40px;
				border-radius:5px;
				border:1px solid gainsboro;
				margin-top:20px;
				text-align:center;
				line-height:40px;
				color:blue;
				}
				div#seven{
				position:relative;
				top:-245px;
				left:202px;
				width:40px;
				height:40px;
				border-radius:5px;
				border:1px solid gainsboro;
				margin-top:20px;
				text-align:center;
				line-height:40px;
				color:blue;
				}
				div#eight{
					position: relative;
					top: -307px;
					left: 254px;
					width: 40px;
					border-radius: 5px;
					border:1px solid gainsboro;
					margin-top:20px;
					text-align:center;
					line-height: 40px;
					color:blue;
				}
		</style>
	</head>
	<body>
		<div id="one"><div id="two"></div></div>
		<div id="three">1</div>
		<div id="four"><u>2</u></div>
		<div id="five"><u>3</u></div>
		<div id="six"><u>4</u></div>
		<div id="seven"><u>5</u></div>
		<div id="eight"><u>6</u></div>
	</body>
</html>